/**
 * Created by Ysssssss on 2021/5/10.
 */

import React, {useRef, useState, useEffect, useCallback} from 'react'
import {useDispatch, useSelector} from "react-redux";
import {getProductTypeSelection} from "@sagas/productCenter";
import {Divider, Row, Select, Col} from "antd";
import { CreateLevelOneProductType, CreateLevelTwoProductType } from "@components/productCenter/modal/ProductTypeEditModal";
import BilinIcon from "@common/presentational/BilinIcon";

const ProductDetailTypeSelect = props => {
    const { value, onChange, productNature } = props
    const [ productTypeId, setProductTypeId ] = useState('')
    const [ subProductTypeMap, setSubProductTypeMap ] = useState({})
    const { productTypeSelection } = useSelector(state => state.productCenter)
    const dispatch = useDispatch()
    const createLevelOneProductTypeModal = useRef()
    const createLevelTwoProductTypeModal = useRef()

    useEffect(() => {
        dispatch(getProductTypeSelection({ productNature }, () => {
            getInitProductType()
        }))
    }, [])

    useEffect(() => {
        if (value && !productTypeId) {
            let _productTypeId = ''
            productTypeSelection.forEach(item => {
                if (!_productTypeId && item.subs.map(sub => sub.id).includes(value)) {
                    _productTypeId = item.id
                }
            })
            _productTypeId && setProductTypeId(_productTypeId)
        }
    }, [value, productTypeSelection, productTypeId])

    useEffect(() => {
        let _subProductTypeMap = {}
        productTypeSelection.forEach(item => {
            _subProductTypeMap[item.id] = item.subs
        })
        setSubProductTypeMap(_subProductTypeMap)
    }, [productTypeSelection])

    const callback = (key, id) => {
        dispatch(getProductTypeSelection({ productNature }))
        if (key === 'subProductTypeId') {
            onChange(id)
        } else {
            setProductTypeId(id)
        }
    }

    return (
        <Row gutter={24} className="mgb-0">
            <Col span={12}>
                <Select value={productTypeId}
                        onChange={value => {
                            setProductTypeId(value)
                            value !== productTypeId && onChange('')
                        }}
                        placeholder="请选择一级类目"
                        dropdownRender={menu => (
                            <div>
                                {menu}
                                <Divider style={{ margin: '4px 0' }} />
                                <div className="pd-8 flex-vertical-center cur-poi ft-14 clr-green"
                                     onClick={() => createLevelOneProductTypeModal.current?.show()}
                                >
                                    <BilinIcon type="plus"/>
                                    <span className="mgl-16">创建</span>
                                </div>
                            </div>
                        )}
                >
                    { productTypeSelection.map(item => (
                        <Select.Option key={item.id} value={item.id}>{ item.name }</Select.Option>
                    )) }
                </Select>
            </Col>
            <Col span={12}>
                <Select value={value}
                        onChange={value => onChange(value)}
                        disabled={!productTypeId}
                        placeholder="请选择二级类目"
                        dropdownRender={menu => (
                            <div>
                                {menu}
                                <Divider style={{ margin: '4px 0' }} />
                                <div className="pd-8 flex-vertical-center cur-poi ft-14 clr-green"
                                     onClick={() => createLevelTwoProductTypeModal.current?.show({
                                         parentId: productTypeId
                                     })}
                                >
                                    <BilinIcon type="plus"/>
                                    <span className="mgl-16">创建</span>
                                </div>
                            </div>
                        )}
                >
                    { (subProductTypeMap[productTypeId] || []).map(item => (
                        <Select.Option key={item.id} value={item.id}>{ item.name }</Select.Option>
                    )) }
                </Select>
                <CreateLevelOneProductType
                    ref={createLevelOneProductTypeModal}
                    productNature={productNature}
                    callback={callback.bind(this, 'productTypeId')}
                />
                <CreateLevelTwoProductType
                    ref={createLevelTwoProductTypeModal}
                    productNature={productNature}
                    callback={callback.bind(this, 'subProductTypeId')}
                />
            </Col>
        </Row>
    )
}

export default ProductDetailTypeSelect